<template>
  <div class="wrapper example8-container">
    <!-- 返回区域 -->
    <div
      class="back-box"
      @click="$router.go(-1)"
    >返回</div>

    <!-- 标题区域 -->
    <h1 class="title-box">8、watch监视reactive函数定义的对象数据</h1>

    <!-- 实例区域 -->
    <div class="example8-box">
      <h1>姓名：{{ person.name }}</h1>
      <h1>年龄：{{ person.age }}</h1>
      <h1>薪水：{{ person.job.j1.salary }}K</h1>
      <button @click="person.name+='~'">修改姓名</button>
      <button @click="person.age++">修改年龄</button>
      <button @click="person.job.j1.salary++">涨薪</button>
    </div>
  </div>
</template>

<script>
import { reactive, watch } from 'vue';

export default {
  name: 'Example8',
  setup() {
    // 数据
    const person = reactive({
      name: '张三',
      age: 20,
      job: {
        j1: {
          salary: 20
        }
      }
    });

    /*
      情况三：监视reactive定义的一个响应式对象数据
      1、注意：此处无法获取 oldValue
      2、注意：强制开启了深度监视（deep配置无效）
    */
    // watch(
    //   person,
    //   (newValue, oldValue) => {
    //     console.log('person变化了--', newValue, oldValue);
    //   },
    //   { deep: false }
    // ); // 此处deep配置无效

    // 情况四：监视reactive定义的一个响应式对象数据中的某个属性
    // watch(
    //   () => person.age,
    //   (newValue, oldValue) => {
    //     console.log('person中age变化了--', newValue, oldValue);
    //   }
    // );

    // 情况五：监视reactive定义的一个响应式对象数据中的某些属性
    // watch([() => person.name, () => person.age], (newValue, oldValue) => {
    //   console.log('person中name或age变化了--', newValue, oldValue);
    // });

    // 情况六：特殊情况（此处需要deep配置）
    watch(
      () => person.job,
      (newValue, oldValue) => {
        console.log('person中job变化了--', newValue, oldValue);
      },
      { deep: true }
    );

    return {
      person
    };
  }
};
</script>

<style lang="scss" scoped>
.example8-container {
  // 返回区域
  & > .back-box {
    width: 50px;
    height: 23px;
    line-height: 20px;
    text-align: center;
    background-color: #efefef;
    margin-bottom: 20px;
    font-size: 14px;
    border: 1px solid #767676;
    border-radius: 4px;
    cursor: pointer;
  }

  // 标题区域
  & > .title-box {
    margin-bottom: 30px;
  }

  // 实例区域
  & > .example8-box {
    & > h1 {
      margin-bottom: 20px;
    }
    & > button {
      margin-right: 20px;
      cursor: pointer;
    }
  }
}
</style>
